<template>
	<div>
		<div class="operateDiv">
			<p class="operateText"><sup>*</sup>获奖条件:</p>
			<!-- <el-radio v-model="awardObtain" label="0">无</el-radio>
			<el-radio v-model="awardObtain" :label="value">设置</el-radio>
			<el-select v-model="value" placeholder="" class="setSelect" :disabled="iSelectAward">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>满
			<el-input placeholder="请输入金额" v-model="obtainMoney" class="setInput" clearable :disabled="iSelectAward">
			</el-input> -->
			<span v-text="awardObtainTxt"></span>
		</div>
		<div class="operateDiv">
			<p class="operateText"><sup>*</sup>领奖条件:</p>
			<!-- <el-radio v-model="awardClaim" label="0">无</el-radio>
			<el-radio v-model="awardClaim" :label="value1">设置</el-radio>
			<el-select v-model="value1" placeholder="" class="setSelect" :disabled="iSelectClaim">
				<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-input placeholder="请输入积分" v-model="claimMoney" class="setInput" clearable :disabled="iSelectClaim">
			</el-input> -->
			<span v-text="awardClaimTxt"></span>
		</div>
		<div class="operateDiv">
			<p class="operateText"><sup>*</sup>普通奖项:</p>
		</div>
		<div class="operateDiv" style="margin-left:-8%">
			<p class="operateText"></p>
			<Prize isDone="1" v-for="(obj,index) in commonPrize1" :key="index" :obj="obj" :pos="index*1+1" :type="1" @enlargeImg="enlargeImg" :leng="commonPrize.length" @detail="detail"></Prize>
		</div>
		<div class="operateDiv" style="margin-left:-8%">
			<p class="operateText"></p>
			<Prize isDone="1" v-for="(obj,index) in commonPrize2" :key="index" :obj="obj" :pos="index*1+1" :type="1" @enlargeImg="enlargeImg" :leng="commonPrize.length" @detail="detail"></Prize>
		</div>
		<!-- <div class="operateDiv redBagDiv">
			<p class="operateText">惊喜红包:</p>
			<el-checkbox v-model="awardSurprise">启用惊喜红包</el-checkbox>
			<p class="giveSet" @click="setGive">发放规则设置</p>
		</div> -->
		<div v-show="showGiveSetDiv">
			<GiveSet @closeGiveSet='closeGiveSet'></GiveSet>
		</div>
		<div v-if="showMoneyRuleDiv">
			<MoneyRule :pos="pos" @closeMoneyRule='closeMoneyRule' :prizeID="prizeID" :leng="commonPrize.length" :obj="itemObj" :giftID="giftID" :btnType="btnType" @showStationDialog="showStationDialog"></MoneyRule>
		</div>
		<div v-if="showAddGift">
			<AddGift :pos="pos" @closeAddGift='closeAddGift' :leng="commonPrize.length" :prizeID="prizeID" :firstID="firstID" :giftID="giftID" :btnType="btnType"></AddGift>
		</div>
	</div>
</template>

<script>
	import GiveSet from './GiveSet'
	import MoneyRule from './MoneyRule'
	import AddGift from './AddGift'
	import Prize from './Prize'
	import {FIND_LOTTERY_BY_CODE,
			FIND_COUPON_RED_BY_CODE,
			} from '@/config/url'
	import Bus from '@/bus.js'

	export default {
		components: {
			GiveSet,
			MoneyRule,
			AddGift,
			Prize,
		},
		props:['prizeID','awardSort','lotterData'],
		data() {
			return {
				giftID:null,
				itemObj:null,
				btnType:'3',
				value: '1',
				value1: '1',
				checked: '',
				options: [{
					value: '1',
					label: '金额'
				}, {
					value: '2',
					label: '电量'
				}],
				options1: [{
					value: '1', 
					label: '会员积分'
				}],
				awardObtainTxt:'',
				awardClaimTxt:'',
				showGiveSetDiv: false,
				showMoneyRuleDiv: false,
				showAddGift: false,
				activityCode:sessionStorage.getItem('activityCode'),//活动code
				awardObtain:'0',//获奖条件：0 不限，1金额，2电量
				obtainMoney:null,//满足获奖的金额
				awardClaim:'0',//获奖条件：0 不限，1 会员积分
				claimMoney:null,//可领取奖项的数值
				awardSurprise:'0',//惊喜红包：0 不开启，1 开启
				awardSurpriseType:'0',//惊喜红包类型：0 百分比中奖，1 老用户回归
				addsWinning:null,//获奖几率
				triggerData:null,//老用户触发时间
				triggerCondition:'0',//老用户触发条件：0 未充电
				repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
				iSelectAward:true,//是否可以选择获奖条件
				iSelectClaim:true,//是否可以选择领奖条件
				lotteryContent:null,//阶梯内容
				diffText:'与初录不一致',
				diffAwardObtain:false,
				diffAwardClaim:false,
				diffAwardSurprise:false,
				firstPrizeList:null,
				firstCommonPrize:null,
				firstID:null,
				pos:null,
				commonPrize1:null,//第一行
				commonPrize2:null,//第二行
			}
		},
		watch:{
			commonPrize(){
				if(this.commonPrize){
					this.commonPrize1 = this.commonPrize.slice(0,5)
					this.commonPrize2 = this.commonPrize.slice(6,this.commonPrize.length-1)
				}else{
					this.commonPrize1 = []
					this.commonPrize2 = []
				}
			},
			lotterData:{
				handler:function(val){
					this.updataData(val[sessionStorage.getItem('lotterySort') - 1])
					// if(val){
					// 	this.lotteryContent = val[sessionStorage.getItem('lotterySort') - 1]
					// 	this.awardObtain = this.lotteryContent.awardObtain || '0'
					// 	this.obtainMoney = this.lotteryContent.obtainMoney
					// 	this.claimMoney = this.lotteryContent.claimMoney
					// 	this.awardClaim = this.lotteryContent.awardClaim || '0'
					// 	// this.awardSurprise = this.lotteryContent.awardSurprise || '0'
					// }
					// if(sessionStorage.getItem('activityScenes') == '994003'){
					// 	this.isCharge = false
					// }else{
					// 	this.isCharge = true
					// }
				},
				immediate: true
			}
		},
		computed:{
			commonPrize(){
				return this.$store.getters.getFirstCouponData
			},
		},
		methods: {
			updataData(val){
				let awardObtain = val.awardObtain
				let obtainMoney = val.obtainMoney
				let claimMoney = val.claimMoney
				let text = ''
				let text2 = ''
				if(awardObtain == 0 || obtainMoney == null){
					text = '无'
				}else{
					if(awardObtain == 1){
						text = '金额'
					}else if(awardObtain == 2){
						text = '电量'
					}
					text +=  ` 满 ${val.obtainMoney}${awardObtain == 1?'元':'度'}`
				}
				if(claimMoney == 0 || claimMoney == null){
					text2 = '无'
				}else{
					text2 = `会员积分 ${val.claimMoney}`
				}
				this.awardObtainTxt = text
				this.awardClaimTxt = text2
			},
			showStationDialog(){
				this.$emit('showStationDialog')
			},
			setGive() {
				this.showGiveSetDiv = true;
			},
			closeGiveSet() {
				this.showGiveSetDiv = false;
			},
			closeMoneyRule() {
				this.showMoneyRuleDiv = false;
			},
			enlargeImg(data) {
				this.$emit('enlargeImg', data)
			},
			closeAddGift() {
				this.showAddGift = false;
			},
			detail(data){
				this.pos = data.item.couponSort
				this.itemObj = data.item
				this.btnType = data.type
				if(data.item.gifsType != '992030'){ 
					this.showMoneyRuleDiv = true
				}else{
					this.showAddGift = true
				}
				this.giftID = data.dataID 
				this.firstID = data.firstID 
			},
		},
	}
</script>

<style>
	.operateDiv {
		width: 100%;
		margin: auto;
		margin-bottom: 0.08rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 0;
		position: relative;
	}
	.checkTxt{
		color: #FF2E2E;
		position: absolute;
		right: -7%;
	}
	
	.operateText {
		text-align: end;
		width: 13%;
		margin-right: 0.08rem;
	}
	
	.setSelect {
		margin-right: 0.08rem;
		width: 0.7rem;
	}
	.setInput {
		margin-left: 0.08rem;
		width: 0.7rem;
	}
	
	.giveSet {
		color: #3395FF;
		text-decoration: underline;
		cursor: pointer;
	}
	
	.redBagDiv .el-checkbox {
		padding-top: 0.03rem;
	}
	
</style>